<template>
    <section style="background: #fff;padding: 0 .24rem;position: absolute;top: 0;left: 0;right: 0;">
      <div class="deal_info_top">
        <div class="top_title">
          <img :src="iconurl" class="deal_info_img" v-if="apilogo">
          <span class="deal_font">{{name}}</span>
        </div>
        <p style="margin-top: .46rem">
          <span class="deal_price">{{price}}</span>
          <span style="font-size: .24rem" v-if="apilogo">元</span>
        </p>

      </div>

        <ul class="deal_ul">
          <li class="deal_li">
            <span class="left_title">流水号</span>
            <span>{{outTradeNo}}</span>
          </li>
          <li class="deal_li">
            <span class="left_title">支付方式</span>
            <span>{{payChannel}}</span>
          </li>
          <li class="deal_li">
            <span class="left_title">交易时间</span>
            <span>{{payTime}}</span>
          </li>
        </ul>

      <div class="deal_balance">
        <span class="left_title">余额</span>
        <span>{{balance}}</span>
      </div>


    </section>
</template>

<script>
    export default {
        name: "dealInfo",
        data(){
          return{
            name:'',
            balance:'',
            outTradeNo:'',
            payTime:'',
            payChannel:'',
            price:'',
            iconurl:'',
            apilogo:false,
          }
        },
      created(){
        let setId = sessionStorage.getItem('setId');
        const that = this;

        this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
          .then((response)=>{
            if(response.data.code != 200){
              this.$dialog.notify({
                mes: '登录失效，正在跳转至登录页面',
                timeout: 1500,
                callback:()=>{
                  that.$router.push('/login');
                }
              });
            }else{
              if(setId != null){
                that.$dialog.loading.open('正在加载');
                setTimeout(()=>{
                that.$ajax.post(window.g.apiUrl+'/account/getRecordD.do',JSON.stringify({
                  id:setId,
                })).then((response)=>{
                  that.$dialog.loading.close();
                  if(response.data.code == 200){
                    that.apilogo = true;
                    if(response.data.data.desc.indexOf('|') >= 0){
                      if(response.data.data.outTradeNo.substr(0,1) == 'C'){
                        that.name = response.data.data.desc.substr(0,response.data.data.desc.indexOf('|'))
                      }else{
                        that.name = response.data.data.desc.substr(response.data.data.desc.indexOf('|')+1)
                      }
                    }else{
                      that.name = response.data.data.desc;
                    }
                    that.balance = response.data.data.balance;
                    that.outTradeNo = response.data.data.outTradeNo;
                    that.payTime = response.data.data.createTime;
                    that.price = response.data.data.price;
                    this.iconurl = response.data.data.iconurl;
                    if(response.data.data.payChannel == 0){
                      that.payChannel = '微信';
                    }else if(response.data.data.payChannel == 1){
                      that.payChannel = '支付宝';
                    }else if(response.data.data.payChannel == 2){
                      that.payChannel = '余额';
                    }else if(response.data.data.payChannel == 3){
                      that.payChannel = '平台';
                    }
                  }else{
                    that.$dialog.notify({
                      mes: '信息获取超时，请稍后重试',
                      timeout: 1500,
                    });
                  }
                }).catch(()=>{
                })
                },100)
              }
            }
          }).catch(()=>{
        })


      },
    }
</script>

<style scoped>
  .deal_info_top{
    border-bottom: 1px solid #f5f5f5;
    padding: .5rem 0 .74rem 0;
  }
  .deal_info_img{
    width: .6rem;
    height: .4rem;
  }
  .top_title{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .deal_font{
    margin-left: .2rem;
  }
  .deal_price{
    font-size: .54rem;
    font-weight: bold;
  }
  .deal_ul{
    padding-top: .3rem;
    border-bottom: 1px solid #f5f5f5;
  }
  .deal_li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
  }
  .left_title{
    color: #909090;
  }
  .deal_balance{
    display: flex;
    align-items: center;
    height: .8rem;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
  }

</style>
